Case Study 004 E-commerce · Sports Nutrition

BIG MUSCLE

A bilingual commerce platform built for Egypt’s sports nutrition market — pairing a mobile-first storefront with a no-code admin system for products, orders, and promotions.

E-commerce UX Full-Stack Development Arabic / English Cash-on-Delivery Checkout
Explore Live Store View Source Code
About Project

Supplements, simplified.

Big Muscle is a dynamic online store for sports supplements in Egypt. Customers can browse products, apply offers, and place cash-on-delivery orders without creating an account.

The bilingual storefront switches between Arabic and English with right-to-left and left-to-right layouts. Behind it, a dedicated dashboard lets the store owner manage the shop without editing code.

ROLEFull-Stack Developer
MARKETEgypt
LANGUAGESArabic / English
PAYMENTCash on Delivery

Product Discovery

Search, category filters, and detailed product views help customers find products quickly.

Simple Checkout

A persistent cart and one-page checkout keep the path to ordering short.

Smart Promotions

Promo codes, automatic discounts, free-shipping rules, and bundles work together.

Owner Dashboard

Products, categories, orders, announcements, and offers are managed from one place.

Design Philosophy

High-energy design. Low-friction shopping.

The black foundation and strong red accents create an athletic, high-contrast identity while keeping attention on the products and key actions. A responsive mobile-first layout, clear pricing, and instant language switching make the experience easy to use across devices and languages.

UX / Conversion Strategy

Fewer steps.
More confidence.

The shopping experience is designed to reduce friction: no forced registration, visible order totals, region-based delivery fees, and a checkout form that keeps the essential details together.

<4
Clicks to Checkout
2
Store Languages
0
Forced Sign-ups
COD
Payment Method

Short Purchase Path

01Browse or search products
02View product details
03Add items to cart
04Enter details and confirm

Region-Based Shipping

Cairo / Giza90 EGP
Alexandria90 EGP
Delta / Canal90 EGP
Upper Egypt120 EGP
Sinai / Red Sea / Matrouh130 EGP

Shipping updates with the selected region. The checkout also displays an advisory about possible extra fees for orders over 2 kg.

Customer Journey

From browse to doorstep.

A clear path from product discovery through cash-on-delivery order confirmation.

01

Discover

Browse the catalog, search instantly, or filter by category.

02

Explore

Open a product detail view and inspect its full-size image.

03

Add to Cart

Adjust quantities and see the cart subtotal update immediately.

04

Check Out

Enter contact details, choose a region, and review live totals.

05

Confirm

Place the order with cash on delivery and view the confirmation.

Storefront & Admin Screens

Every screen, intentional.

Add your real project screenshots to the frames below. They’re arranged to follow the shopper’s journey and show the owner-facing tools too.

01 · Storefront
Big Muscle storefront homepage

Homepage & Featured Offers

The announcement bar, hero, and featured products introduce the store and its current offers.

02 · Product Discovery
Big Muscle mobile product grid

Product Browsing on Mobile

A responsive two-column catalog with category filtering and instant product search.

03 · Product Details
Big Muscle product detail modal and image lightbox

Product Details & Image Lightbox

Customers can inspect product information and view a larger image without losing their place.

04 · Checkout
Big Muscle checkout with region selector and live totals

Region Selector & Live Totals

Shipping, discounts, and the final total update as the customer completes the order.

05 · Admin Dashboard
Big Muscle admin dashboard for promotions and announcements

Promotions & Store Management

The owner can manage promo codes, announcement text, offers, and products from the dashboard.

06 · Order Confirmation
Big Muscle order confirmation screen

CONTACT US

A dedicated contact section makes it easy for customers to reach Big Muscle for inquiries, support, and assistance.

Admin Experience

Store operations, made simple.

The dashboard gives the store owner control over everyday operations and campaigns without requiring coding knowledge.

01

Products & Categories

Add, edit, or remove products, manage categories, set prices and stock, and upload product images.

02

Orders

Review customer details, order items, shipping, discounts, totals, and order status.

03

Offers & Promo Codes

Create percentage, fixed-amount, and free-shipping codes, with minimum-order and category rules.

04

Storefront Controls

Edit Arabic and English announcements, configure automatic offers, and publish bundle cards.

Promotion logic: promo codes take priority over automatic offers to avoid stacking discounts.
Color System

Bold by design.

Big Muscle Palette

A high-contrast palette built around the brand’s red, black, and white. Red highlights key actions; black keeps the interface focused on products.

#E60000 Brand Red
#0D0D0D Primary Black
#1A1A1A UI Surface
#FFFFFF White
Technical Build

From storefront to back office.

A vanilla JavaScript storefront connects to a REST API and cloud-backed services for product data, images, and deployment.

Frontend

HTML5 · CSS3 · JavaScript

Responsive storefront built with vanilla JavaScript and modular scripts.

Backend

Node.js · Express

RESTful API for the storefront and admin features.

Database

MongoDB Atlas

Cloud database for the store’s dynamic content and records.

Image Storage

Cloudinary CDN

Product images are uploaded to Cloudinary and delivered through its CDN.

Deployment

Vercel

Serverless deployment for the live platform.

Interface

Font Awesome 6

Icon library used across the storefront and dashboard.

LocalStorage cart persistence RTL / LTR switching Region-based shipping Live order totals Automatic promotions
The Result

A complete store.
Owner-controlled.

Big Muscle brings product discovery, bilingual shopping, checkout, promotions, and store management into one platform — giving customers a direct path to order and the owner a practical way to run the store without touching code.

Visit Live Store → Explore Source →